Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 340 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Hide & Seek Tab Bar Animation</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body class="d-flex flex-column">
    <div class="container d-flex align-items-center justify-content-center">
        <nav>
            <ul>
                <li class="align-items-center justify-content-center">
                    <a onclick="addClass(0)" href="#" class="link d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-house"></i>
                        <span>Home</span>
                    </a>
                </li>

                <li class="align-items-center justify-content-center">
                    <a onclick="addClass(1)" href="#" class="link d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <span>Search</span>
                    </a>
                </li>

                <li class="align-items-center justify-content-center">
                    <a onclick="addClass(3)" href="#" class="link d-flex align-items-center justify-content-center">
                        <i class="fa-solid fa-gear"></i>
                        <span>Settings</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>


    <script>
        function addClass(elem) {
            for (let i = 0; i < elem.length; i++) {
                elem[i].addEventListener("click", function (e) {
                    const current = this;
                    for (let i = 0; i < elem.length; i++) {
                        if (current !== elem[i]) {
                            elem[i].classList.remove("isActive");
                            elem[i].classList.add("notActive");
                        } else {
                            current.classList.add("isActive");
                            current.classList.remove("notActive");
                        }
                    }
                    e.preventDefault();
                });
            }
        }
        addClass(document.querySelectorAll(".link"));
    </script>
</body>

</html>

Share this file: